<template>
    <page class="agent">
        <v-back/>
        <div class="agent-content">
            <div class="description">
                <span class="title">代理申请说明：</span>
                <div style="padding: 10px;" v-html="system.proxyApplyIntroduction"></div>

                <div class="result-group">
                    <template v-if='userInfo.proxyStatusEnum == -2'>
                        <div class="result">
                            <div class="failed">
                                <van-icon name="cross" />
                            </div>
                            <span class="result-title">审核失败</span>
                            <!--<span class="result-desc">您的操作异常</span>-->
                        </div>
                    </template>
                </div>
            </div>

            <a href="javascript: void (0)" class="a-btn" @click="apply" v-if="userInfo.proxyStatusEnum == -1">申请成为代理</a>

            <template v-if="userInfo.proxyStatusEnum == -2">
                <a href="javascript: void (0)" class="a-btn">拒绝</a>
            </template>

            <template v-if="userInfo.proxyStatusEnum == 0">
                <a href="javascript: void (0)" class="a-btn">申请中</a>
            </template>
            <template v-if="userInfo.proxyStatusEnum == 1">
                <a href="javascript: void (0)" class="a-btn">通过</a>
            </template>

        </div>
    </page>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name: "agent",
        computed: {...mapGetters(['userInfo','system'])},
        methods: {
            apply(){
                this.$router.push("/agent/apply");
            }
        }
    }
</script>

<style scoped lang="less">
    .agent{
        .agent-content{
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: @page-color;
            .description{
                flex: 1;
                background-color: #fff;
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                .title{
                    font-size: @big;
                    padding: @padding;
                    font-weight: 700;
                }
                p{
                    margin-top: 5px;
                    padding: 0 @padding;
                    font-size: @larger;
                    line-height:28px;
                    height: calc(3rem - @padding);
                    overflow-y: auto;
                    padding-bottom: @padding;
                }
                .result-group{
                    flex: 1;
                    background-color: @page-color;
                    padding: @padding;
                    .result{
                        background-color: #fff;
                        height: 1.8rem;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        .failed{
                            width: .5rem;
                            height: .5rem;
                            background-color: red;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: .5rem;
                            i{
                                color: #fff;
                                font-size: 30px;
                                font-weight: 600;
                            }
                        }
                        .result-title{
                            margin-top: @padding;
                            font-size: @larger;
                        }
                        .result-desc{
                            font-size: @mini;
                            color: #999;
                        }
                    }
                }
            }
        }
    }
</style>
